<template>
  <div class="bg-grey pb-60">
    <!--面包屑开始-->
    <div class="archive-header pt-20 wow fadeInUp animated">
      <div class="container">
        <h2 class="font-weight-900">友链</h2>
        <div class="breadcrumb">
          <a href="index.html" rel="nofollow">友链</a>
          <span rel="nofollow"></span> 留言
        </div>
        <div class="bt-1 border-color-1 mt-10 mb-40"></div>
      </div>
    </div>
    <!--面包屑结束-->
    <div class="container">
      <el-card shadow="hover" class="wow fadeInUp animated is-always-shadow">
        <h5 class="block-title pt-20" style="color: #6e6e6e">
          <svg
            t="1694779373389"
            class="icon pb-1"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6664"
            id="mx_n_1694779373390"
            width="30"
            height="30"
          >
            <path
              d="M512 204.8c168.96 0 307.2 138.24 307.2 307.2s-138.24 307.2-307.2 307.2-307.2-138.24-307.2-307.2 138.24-307.2 307.2-307.2m0-51.2c-197.12 0-358.4 161.28-358.4 358.4s161.28 358.4 358.4 358.4 358.4-161.28 358.4-358.4-161.28-358.4-358.4-358.4z"
              fill="#1296db"
              p-id="6665"
            ></path>
            <path
              d="M550.4 368.64m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z"
              fill="#1296db"
              p-id="6666"
            ></path>
            <path
              d="M486.4 716.8c-7.68 0-15.36-2.56-20.48-7.68-5.12-5.12-7.68-15.36-5.12-23.04l38.4-179.2c-10.24 7.68-23.04 5.12-30.72-2.56-10.24-10.24-12.8-25.6-2.56-35.84 30.72-33.28 66.56-35.84 71.68-33.28 7.68 0 15.36 5.12 20.48 10.24 5.12 5.12 7.68 12.8 5.12 20.48l-38.4 179.2c7.68-5.12 20.48-5.12 28.16 0 12.8 7.68 15.36 23.04 7.68 35.84-25.6 30.72-66.56 35.84-74.24 35.84z"
              fill="#1296db"
              p-id="6667"
            ></path></svg
          >&nbsp;本站信息
        </h5>
        <CustomBlock type="danger">
          <p>名称：{{ site.siteName }}</p>
          <p>简介：{{ site.siteIntro }}</p>
          <p>颜色：#4E8CFF</p>
          <p style="width: 100%">链接：{{ site.siteAddress }}</p>
          <p style="width: 100%">头像：{{ site.userAvatar }}</p>
        </CustomBlock>
        <h5 class="block-title pt-20" style="color: #6e6e6e">
          &nbsp;&nbsp;<svg
            t="1694781539446"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10425"
            width="20"
            height="20"
          >
            <path
              d="M873.9 268.07L669.23 63.31c-8.31-8.31-19.36-12.89-31.12-12.89S615.3 55 606.99 63.31L104.36 566.14c-8.26 8.27-12.96 19.71-12.88 31.4l1.37 203.38c0.16 23.94 19.77 43.54 43.7 43.7l203.3 1.38h0.29c11.6 0 22.93-4.69 31.12-12.89L873.9 330.28c17.15-17.15 17.15-45.06 0-62.21zM328.63 773.92l-163.96-1.11-1.11-164.05 347.88-348.01L676.53 425.9l-347.9 348.02z m398.79-398.95L562.34 209.82l75.77-75.8L803.2 299.17l-75.78 75.8zM851.88 772.88H563.66c-19.88 0-36 16.12-36 36s16.12 36 36 36h288.22c19.88 0 36-16.12 36-36s-16.12-36-36-36zM851.88 636.68H740.36c-19.88 0-36 16.12-36 36s16.12 36 36 36h111.51c19.88 0 36-16.12 36-36s-16.11-36-35.99-36z"
              fill="#1296db"
              p-id="10426"
            ></path></svg
          >&nbsp;&nbsp;申请方法
        </h5>
        <CustomBlock type="danger">
          <p>需要交换友链的小伙伴下方留言🤪</p>
          <p>
            需要的信息包括：网站名称、网站介绍、网站链接、颜色、头像链接、网站链接
          </p>
        </CustomBlock>
        <h5 class="block-title pt-20" style="color: #6e6e6e">
          &nbsp;&nbsp;<svg
            t="1694781831348"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="12493"
            width="20"
            height="20"
          >
            <path
              d="M987.648 848.384a502.784 502.784 0 0 0-228.864-279.552 307.2 307.2 0 1 0-449.024 0 503.808 503.808 0 0 0-228.864 279.552 93.696 93.696 0 0 0 13.312 80.896 124.416 124.416 0 0 0 87.04 43.008 38.4 38.4 0 0 0 0-76.8 51.2 51.2 0 0 1-29.696-12.288 23.04 23.04 0 0 1 0-17.408 429.568 429.568 0 0 1 219.136-244.736 304.128 304.128 0 0 0 319.488 0 429.056 429.056 0 0 1 219.136 244.736 23.552 23.552 0 0 1 0 17.408 51.2 51.2 0 0 1-30.208 12.288 38.4 38.4 0 0 0 0 76.8 124.416 124.416 0 0 0 87.04-43.008 93.696 93.696 0 0 0 21.504-80.896zM304.128 358.4a230.4 230.4 0 1 1 230.4 230.4A230.4 230.4 0 0 1 304.128 358.4z"
              fill="#1F88D9"
              p-id="12494"
            ></path></svg
          >&nbsp;&nbsp;小伙伴们
        </h5>
        <div class="row">
          <div
            class="post-block-list post-module-2 col-md-6 pt-20"
            v-for="(link, index) in linkList"
            :key="index"
          >
            <ul class="list-post">
              <li class="mb-30 wow fadeInUp animated">
                <div
                  class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5"
                >
                  <div
                    class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden"
                  >
                    <a
                      class="color-white"
                      :href="`${link.url}`"
                      target="_blank"
                    >
                      <img :src="link.avatar" alt="" />
                    </a>
                  </div>
                  <div class="post-content media-body">
                    <p class="mb-10">
                      <a :href="`${link.url}`" target="_blank"
                        ><strong :style="`color:${link.color}`">{{
                          link.name
                        }}</strong></a
                      >
                    </p>
                    <p class="text-muted font-small">{{ link.introduction }}</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--评论开始-->
        <h5 class="block-title pt-10 pb-10" style="color: #6e6e6e">
          &nbsp;&nbsp;<svg
            t="1695477921532"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5077"
            width="20"
            height="20"
          >
            <path
              d="M512 0C230.4 0 0 199.111111 0 446.577778s230.4 446.577778 512 446.577778V1024s312.888889-219.022222 366.933333-267.377778c91.022222-79.644444 145.066667-190.577778 145.066667-312.888889C1024 199.111111 793.6 0 512 0z m0 76.8c238.933333 0 435.2 164.977778 435.2 372.622222 0 93.866667-42.666667 187.733333-122.311111 258.844445-31.288889 28.444444-159.288889 119.466667-258.844445 190.577777v-76.8H512C273.066667 822.044444 76.8 654.222222 76.8 449.422222S273.066667 76.8 512 76.8zM219.022222 438.044444c0 36.977778 31.288889 68.266667 68.266667 68.266667s68.266667-31.288889 68.266667-68.266667c0-42.666667-31.288889-68.266667-68.266667-68.266666s-68.266667 31.288889-68.266667 68.266666z m466.488889 0c0 39.822222 34.133333 73.955556 73.955556 73.955556 39.822222 0 73.955556-34.133333 73.955555-73.955556 0-42.666667-34.133333-73.955556-73.955555-73.955555-39.822222 2.844444-73.955556 36.977778-73.955556 73.955555zM512 366.933333c-39.822222 0-73.955556 34.133333-73.955556 73.955556S472.177778 512 512 512s73.955556-34.133333 73.955556-73.955556c0-42.666667-34.133333-71.111111-73.955556-71.111111z"
              fill="#1296db"
              p-id="5078"
            ></path></svg
          >&nbsp;&nbsp;评论
        </h5>
        <form class="input-group form-subcriber mt-10 d-flex single-comment">
        <div class="thumb mr-20">
            <img
            style="width:48px; height:48px; border-radius:50%"
            :src="userAvatar"
            alt=""
            />
        </div>
         <MyEmoji @emoji-selected="handleEmojiSelected"></MyEmoji>
        <textarea rows="4" cols="50"  v-model="commentContent" type="html" class="form-control bg-white font-small" style="border-top-left-radius:40px;  border-bottom-left-radius: 40px;" placeholder="">     
        </textarea>
        <el-button class="btn bg-primary text-white" @click.prevent="comment(parentId = null,replayId = null, toUid = null,commentContent = commentContent)" >发送</el-button>    
        </form>
        <div class="comments-area entry-wraper mb-50">
          <div class="comment-list wow fadeIn animated" v-for="(parentComment,index) in recordList" :key="parentComment.id">
            <div class="single-comment justify-content-between d-flex">
              <div class="user justify-content-between d-flex">
                <div class="thumb">
                  <img
                    :src="parentComment.avatar"
                    alt=""
                  />
                </div>
                <div class="desc">
                  <h5>
                    <a href="#">{{parentComment.fromNickname}}</a>
                  </h5>
                  <p class="comment">
                  {{parentComment.commentContent}}&nbsp;
                  <svg @click="commentLike(parentComment.id)" t="1695696132900" class="icon pb-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="18" height="18"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="1462" fill="#1296db"></path></svg>
                    {{parentComment.likeCount == 0 ? '' : parentComment.likeCount }}
                  </p>
                </div>
              </div>
              <div class="ml-auto mt-auto">
                <div class="d-flex justify-content-between ">
                    <div class="d-flex align-items-center">
                      <p class="date">{{parentComment.createTime}}</p>
                    </div>
                    <div class="reply-btn">
                      <a   class="btn-reply" v-show="userInfo.id != parentComment.fromUid" @click="answerParent(index)">回复</a>
                    </div>
                  </div>
              </div>
            </div>
            <div v-show="parentComment.showReplyBox" :key="parentComment.id">
              <div class="input-group form-subcriber mt-10 d-flex single-comment">
              <MyEmoji @emoji-selected="handleEmojiSelected" ></MyEmoji>
              <textarea rows="4" cols="50"  v-model="commentCommentParent" type="html" class="form-control bg-white font-small" style="border-top-left-radius:40px;  border-bottom-left-radius: 40px;" placeholder="">     
              </textarea>
              <el-button class="btn bg-primary text-white" @click.prevent="comment(parentId = parentComment.id,replayId = parentComment.id, toUid = parentComment.fromUid,commentContent = commentCommentParent)" >发送</el-button> 
              </div>
            </div>
            <!--子评论开始-->
            <div   v-if="parentComment.replyVOList" v-for="(child,index) in parentComment.replyVOList" :key="child.id">
              <div class="single-comment depth-2 justify-content-between d-flex mt-30">
                    <div class="user justify-content-between d-flex" >
                      <div class="thumb">
                        <img
                          :src="child.avatar"
                          alt=""
                        />
                      </div>
                      <div class="desc">
                            <h5>
                              <a href="#">{{child.fromUid == userInfo.id ? '我' :  child.toNickname }}&nbsp;&nbsp;</a>
                                <a href="#" ><svg t="1695697346999" class="icon pb-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8405" width="19" height="19"><path d="M761.856 405.504l-255.68-170.432A128 128 0 0 0 307.2 341.568v340.864a128 128 0 0 0 199.008 106.496l255.648-170.432a128 128 0 0 0 0-212.992z" p-id="8406"></path></svg>&nbsp;&nbsp;</a>
                              <a href="#" style="color:#5869da">{{child.toUid == userInfo.id ? '我' : '@' + child.toNickname }}</a>
                            </h5>
                        <p class="comment">
                          {{child.commentContent}}
                          &nbsp;
                        <svg @click="commentLike(child.id)" t="1695696132900" class="icon pb-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="18" height="18"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="1462" fill="#1296db"></path></svg>
                          {{child.likeCount == 0 ? '' : child.likeCount }}
                        </p>
                      </div>
                    </div>
                    <div class="ml-auto mt-auto">
                    <div class="d-flex justify-content-between">
                      <div class="d-flex align-items-center">
                        <p class="date">{{child.createTime}}</p>
                      </div>
                      <div class="reply-btn">
                        <a  class="btn-reply" v-show="userInfo.id != child.fromUid" @click="answerChild(parentComment.id,index)">回复</a>
                      </div>
                    </div>
                    </div>
              </div>
                 <div v-show="child.showReplyBox" :key="child.id">
         <div class="single-comment depth-2 justify-content-between d-flex mt-10" >
            <div class="input-group form-subcriber mt-10 d-flex single-comment">
            <MyEmoji @emoji-selected="handleEmojiSelected" ></MyEmoji>
            <textarea rows="4" cols="50"  v-model="commentContentChild" type="html" class="form-control bg-white font-small" style="border-top-left-radius:40px;  border-bottom-left-radius: 40px;" placeholder="">     
            </textarea>
            <el-button class="btn bg-primary text-white" @click.prevent="comment(parentComment.id,replayId = child.id, toUid = child.fromUid,commentContent = commentContentChild)" >发送</el-button> 
            </div>
            </div>
                 </div>
   
            </div>
          </div>
        </div>
        <!--评论结束-->
       
      </el-card>
    </div>
  </div>
</template>
<script>

export default {
  name: "friendLink",
  data() {
    return {
      selectedEmoji: null, // 存储选中的表情
      commentContent:'',
      commentCommentParent:'',
      commentContentChild:'',
      linkList: [],
      userinput:'',
      recordList:[
        {
          replyVOList:[],
        }
      ]
    };
  },
  mounted() {
    this.getFriendList();
    this.getCommentList();
  },
  methods: {
    processRecordList() {
      // 遍历recordList并为每个评论对象添加showReplyBox属性
        this.recordList.forEach((item) => {
        item.showReplyBox = false;
        if(item.replyVOList)
        {
        item.replyVOList.forEach((item) => {
          item.showReplyBox = false;
        });
        }
      });
    },
    handleEmojiSelected(emoji) {
      // 处理选中的emoji
      this.selectedEmoji = emoji;
      this.commentContent += emoji;
    },
    async getFriendList() {
      const res = await this.$API.link.getFriendLinkList();
      if (res.code == 200) {
        this.linkList = res.data || [];
      } else {
        this.$message({
          type: "error",
          message: "获取友链失败！",
        });
      }
    },
    async getCommentList(){
      const res = await this.$API.link.getCommentList(2,1,100);
      if(res.code == 200)
      {
        this.recordList = res.data.recordList;
        this.processRecordList();
        console.log(this.recordList)
      }
      else{
        this.$message({
          type:'error',
          message:'获取评论列表失败！'
        })
      }
    },
    answerParent(index){
      let item = this.recordList[index];
      item.showReplyBox = item.showReplyBox ? false : true;
      this.$set(this.recordList, index, item);
    },
    answerChild(parentId,index){
      this.recordList.forEach((item) =>{
        if(item.id == parentId)
        {
         let childItem = item.replyVOList[index];
          console.log('childrenItem---------',childItem)
         childItem.showReplyBox = !childItem.showReplyBox;
         this.$set(item.replyVOList,index,childItem);
         console.log('update',item.replyVOList[index])
        }
      })
    },
    //点赞某条评论
    async commentLike(commentId){
      const res = await this.$API.link.likeComment(commentId)
      if(res.code == 200)
      {
        this.$message({
          type:'success',
          message:'点赞成功！'
        })
        this.getCommentList();
      }
      else{
          this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    //评论
   async comment(parentId = null,replayId = null, toUid = null,commentContent = ''){
  
    let data = {
      commentContent:commentContent,
      commentType:2,
      parentId:parentId,
      replyId:replayId,
      toUid:toUid,
    }
    if(data.commentContent.trim() == ''){
      this.$message({
        type:'warning',
        message:'评论内容不能为空！'
      })
      return;
    }
    console.log('id',data)
    const  res = await this.$API.link.addComment(data);
    if(res.code == 200){
      console.log(this.site.commentCheck)
      this.site.commentCheck == 0 ? this.$message({
        type:'success',
        message:'评论成功！'
      }) : this.$message({
        type:'success',
        message:'评论成功！请等待管理员审核！'
      })
      this.getCommentList();
      this.commentContent = ''
      this.commentContentChild = '',
      this.commentCommentParent = ''
    }
    else{
      if(res.msg == '未登录'){
      this.$message({
        type:'error',
        message: '请先登录！'
      })
      }
    }
   }

  },
  computed: {
    site() {
      return this.$store.state.site.site.siteConfig || {};
    },
    userAvatar(){
        return this.$store.state.user.avatar || this.$store.state.site.site.siteConfig.touristAvatar || '';
    },
    userInfo(){
        return this.$store.state.user.userInfo || '';
    }
  },
};
</script>

<style scoped>
/*评论*/
.comments-area {
  background: transparent;
  margin-top: 50px;
}
.comments-area h4 {
  margin-bottom: 35px;
  color: #2a2a2a;
  font-size: 18px;
}
.comments-area h5 {
  font-size: 16px;
  margin-bottom: 0px;
}
.comments-area a {
  color: #2a2a2a;
}
.comments-area .comment-list {
  padding-bottom: 48px;
}
.comments-area .comment-list:last-child {
  padding-bottom: 0px;
}
.comments-area .comment-list.left-padding {
  padding-left: 25px;
}
.comments-area .thumb {
  margin-right: 20px;
}
.comments-area .thumb img {
  width: 47px;
  border-radius: 50%;
}
.comments-area .date {
  font-size: 14px;
  color: #999999;
  margin-bottom: 0;
  /* margin-left: 20px; */
}
.comments-area .comment {
  margin-bottom: 10px;
  color: #777777;
  font-size: 15px;
}
.comments-area .btn-reply {
  background-color: transparent;
  color: #888888;
  font-size: 14px;
  display: block;
  font-weight: 400;
  border-bottom: 1px solid rgb(225, 225, 225);
  font-style: italic;
}
.comment-form {
  padding-top: 45px;
  margin-top: 50px;
  margin-bottom: 20px;
}
.comment-form .form-group {
  margin-bottom: 30px;
}
.comment-form h4 {
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 22px;
  color: #2a2a2a;
}
.comment-form .name {
  padding-left: 0px;
}
.form-control {
  border: 1px solid rgb(225, 225, 225);
  border-radius: 30px;
  height: 48px;
  padding-left: 18px;
  font-size: 14px;
  background: transparent;
  background: #fff;
}
textarea.form-control {
  border-radius: 10px;
}
.form-control:focus {
  outline: 0;
  box-shadow: none;
}
.form-control::placeholder {
  font-weight: 300;
  color: #999999;
}
.form-control::placeholder {
  color: #777777;
}
.custom_select {
  position: relative;
  width: 100%;
}
.custom_select .nice-select {
  width: 100%;
  margin-bottom: 1rem;
}
.nice-select .list {
  width: 100%;
}
.comment-form textarea {
  padding-top: 18px;
  border-radius: 10px;
  height: 100% !important;
  background: #fff;
}
.comment-form::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 13px;
  color: #777;
}
.comment-form::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 13px;
  color: #777;
}
.comment-form:-ms-input-placeholder {
  /* IE 10+ */
  font-size: 13px;
  color: #777;
}
.comment-form:-moz-placeholder {
  /* Firefox 18- */
  font-size: 13px;
  color: #777;
}
.button-contactForm {
  background: #ef3f48;
  color: #fff;
  border-color: #ef3f48;
  padding: 12px 25px;
}
.button {
  display: inline-block;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 54px;
  border-radius: 30px;
  color: #fff;
  border: 1px solid var(--color-primary);
  text-transform: uppercase;
  background: var(--color-primary);
  cursor: pointer;
  transition: all 300ms linear 0s;
}
.button:hover {
  background: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.single-comment.depth-2 {
  margin-left: 50px;
}

@media screen and (max-width: 768px) {
  .thumb img {
    min-width: 30px; /* 调整头像大小为180px */
  }
}

@media screen and (max-width: 768px) {
  .comment {
    max-width: 100%; /* 最大宽度为容器的100% */
  }
}


</style>

/* 响应式布局回复列表的头像 */
.comments-area .thumb img {
    width: 47px;
    border-radius: 50%;
}
/* 在移动端上的样式，屏幕宽度小于某个阈值时应用 */
@media screen and (max-width: 768px) {
    .comments-area .thumb img {
        width: 120px; /* 在移动端上将宽度修改为 180px */
    }
}